<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            // document.getElementById();
            // document.getElementsByClassName();
            // document.getElementsByName();
            // document.getElementsByTagName();

            // document.querySelector();对象
            // document.querySelectorAll();数组
           
           

            // var li= document.querySelector("#li1");
        //    console.log(li.parentElement.parentElement.parentElement.parentElement);//找的元素 最多找到body
        //    console.log(li.parentNode.parentNode.parentNode.parentNode);//内容一样 类型不一样 找的节点 最多找到html
           //var ul =document.querySelector("ul");
        //   console.log(ul.childNodes);//文本节点->ul 到li之间的空格
        //   console.log(ul.children);//元素 不包括文本节点

            // var li =document .querySelector("#li1")
            //     li.nextElementSibling //操作兄弟节点下一个 找的元素
            //     li.nextSibling      //找的text
            //     li.previousElementSibling   //像上找


        //style
                // var li =document.querySelector("#li1");
                // li.style.color="red";
                // li.style.background-color="#ccc"
                //驼峰命名法 短横线不识别 使用驼峰命名法
                //  li.style.backgroundColor="#ccc"
                //数组解决方法
                //  li.style["background-color"]="#ccc"
        
                //     属性         非原始属性  attributes 
            // console.log(li.id)
            // console.log(li.className)//class 是关键字
            // console.log(li.attributes["data-id"])//整个属性 
            // console.log(li.attributes["data-id"]) // name value   属性的值

            //click  单击事件
            //change  单选、多选状态改变、下拉框选项改变、文本框的值改变
            //鼠标事件 移入移出 mouseover  mouseout
            //keydown keypress按下松开 keyup 
        //    var btn= document.querySelector("button")
        //     btn.onclick =function(){
        //         console.log(this.value) //交互控件的值
        //     }
        //     var li =document.querySelector("#li1")
        //     li.onclick =function(){
        //         console.log(this.innerText)  //text 获取html里的内容 也就是text
        //         console.log(this.innerHTML) //html 获取html li的 html
        //         console.log(this.outerHTML) //标签加内容 <li>内容</li>
        //         //outerHTML 含本身标签
            // }
            var select =document.querySelector("select");
            select.onchange =function(){
                console.log(this.value);
            }
            // bootstrap animate wow.js echarts
            // select.onclick =function(){
            //     console.log(this.value);//会浪费
            // }
            
        }
    </script>
</head>
<body>
   
    <!-- <ul>
        <li id="li1" class="li" data-id="0">列表1
            <span>ss</span>
        </li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>      -->
    <!-- <button value="11">单击</button> -->
    <select name="" id="" size="0" > <!-- 单size 显示一条  带multiple 多选 size 是几显示几条--> 
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>

    </select>
</body>
</html>